<template>
    <div class="header-box">
        <a-row>
            <a-col :span="3">
                <div class="left-header" @click="goHome">{{ title }}</div>
            </a-col>
            <a-col :span="19">
                <a-menu v-model:selectedKeys="current" theme="dark" mode="horizontal" @select="selectMenu"  v-if="menuHeaderType==='double'">
                    <a-menu-item :index="item.key" v-for="item in menuData" :key="item.key">{{item.name}}</a-menu-item>
                </a-menu>
            </a-col>
            <a-col :span="2">
                <p class="right">
                    <span class="username">{{ userName }}</span>
                    <span class="out" @click="out">退出</span>
                </p>
            </a-col>
        </a-row>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, computed, ref, reactive, toRefs } from 'vue';
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { IState } from '@/store/index'
type HeaderType = 'double' |'single'|''
export default defineComponent({
    name: 'header-bar',
    props: { msg: String },
    setup(props) {
        const $store = useStore<IState>()
        const router = useRouter()
        // const userName = computed(()=>$sotre.state.userInfo.userName) 
        const userName = computed(() => $store.getters.getUserInfo.userName)
        const title = $store.getters.getUserInfo.title
        const current = ref<string[]>([$store.getters.getHeaderActive.key?$store.getters.getHeaderActive.key:'1'])
        const menuData = ref<any[]>([])
        const menuHeaderType = ref<HeaderType>($store.getters.getMenuType)// 菜单类型，单菜单 / 双菜单

        onMounted(() => {
            if(menuHeaderType.value ==='double'){
                let menuArr = $store.getters.getMenu
                console.log(menuArr)
                let arr = []
                for(var i =0;i<menuArr.length;i++){
                    if(menuArr[i].parentId==''){
                        arr.push(menuArr[i])
                    }
                }
                console.log(current.value)
                current.value == ['1']? $store.commit('setHeaderActive', arr[0]):$store.commit('setHeaderActive', $store.getters.getHeaderActive)
                menuData.value =arr
            }
        })
        const selectMenu = (data:any) =>{
            let selectKey =  menuData.value.filter((item:any)=>{
              return  item.key === data.key
            })[0]
            $store.commit('setHeaderActive',selectKey)
        }
        const out = () => {
            router.push('/login')
            $store.commit('setClearStore')
        }
        const goHome = () => {
            //    $sotre.commit('login','aa')
        }
        return {
            current,
            title,
            userName,
            menuHeaderType,
            menuData,
            // ...toRefs(state),
            selectMenu,
            goHome,
            out
        }
    },
});
</script>
<style lang="scss" scoped>
.header-box {
    // background:#001529;
    height: 100%;
}
.left-header {
    line-height: 60px;
    font-size: 24px;
    text-align: center;
    color: cornsilk;
}
.right {
    color: cornsilk;
    margin: 0 !important;
    line-height: 60px;
    .username {
        margin-right: 5%;
    }
}
</style>
